import React from 'react'
import styled from 'styled-components'

const Label = styled.label`
    display:flex;
    align-items: center;
    > span { margin-right: 16px; white-space: nowrap; }
    > input {
      display:block;
      width: 100%;
      height: 44px;
      background: none;
      border: none;
    }
`;

type Props = {
    label: string
} & React.InputHTMLAttributes<HTMLInputElement>

const Input: React.FC<Props> = (props) => {
    const { label, children, ...rest } = props
    return (
        <Label>
            <span>{props.label}</span>
            <input {...rest} />
        </Label>
        // 属性接口rest
    )
}

export { Input }